<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/echarts.min.js"></script>
</head>

<body>
  <div id="echarts" style="width: 600px;height:400px;"></div>
  <script>
    // toolbox 工具组件


    let mCharts = echarts.init(document.getElementById('echarts'))
    const XDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    const YDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    let option = {
      title: {
        text: '语文成绩',
        textStyle: {
          color: 'teal',
          fontSize: '32',
        },
        borderWidth: '2',
        padding: [8, 10],
        borderRadius: 10,
        left: 'center',
        top: 5
      },
      // 提示框
      tooltip: {
        trigger: 'item',
        // trigger:'axis'
        triggerOn: 'click',
        // triggerOn:'mousemove',
        // formatter:`{a}:{b}:{c} `
        formatter: function (arg) {
          console.log(arg);
          return `${arg.name}的${arg.seriesName}分数是${arg.value}`
        }
      },
      toolbox: {
        feature:{
          // 导出图片 
          saveAsImage:{},
          // 数据视图
          dataView:{},
          // 重置
          restore:{},
          // 区域缩放
          dataZoom:{},
          // 图表类型切换
          magicType:{
            // 柱形图  折线图
            type:['bar','line']
          }
        }
      },
      xAxis: {
        type: 'category', //设置为类目轴
        data: XDataArr
      },
      yAxis: {
        type: 'value'
      },
      label: {
        show: true,
        position: 'top',
        rotate: 45
      },
      series: [
        {
          name: '语文',
          type: 'bar',//柱状图
          data: YDataArr,
          label: {
            show: true,
          },
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>